<!-- 页眉 -->
{include file="public/header" /}
<!-- 导航 -->
{include file="public/nav" /}
<!-- 主体 -->
<div class="layui-fluid" id="main">
    <div class="layui-row" style="margin-top: 20px">
        <div class="layui-col-md2" style="max-width: 130px;min-width: 130px; margin-right: 20px;">
            <img src="/static/img/logo_a.png" style="border: 0px;">
        </div>
        <div class="layui-col-md10">
            <form class="layui-form" action="">
                <div class="layui-form-item">
                    <div class="layui-input-inline" style="width: 500px">
                        <input name="keyword" id="keyword" lay-verify="keyword" autocomplete="off" placeholder="请输入搜索关键词，普通检索不要输入特殊符号，如: '&'、'^'、'|' 等" class="layui-input" type="text">
                        <input name="year" id="year" type="hidden" value="">
                        <input name="issue" id="issue" type="hidden" value="">
                    </div>
                    <div class="layui-input-inline">
                        <button class="layui-btn" lay-submit="" lay-filter="searchButton">搜一下</button>
                    </div>
                </div>
            </form>
        </div>
        <hr>
    </div>

    <div class="layui-row" style="margin-top: 20px">
        <div class="layui-col-md8">
            <blockquote class="layui-elem-quote">本刊物共有文献 <span id="counts"></span> 篇，用时：<span id="times"></span>（秒）</blockquote>
            <div class="layui-row">
                <div class="layui-col-md12">
                    <table class="layui-hide" lay-filter="dataTable" id="dataTable"></table>
                </div>
            </div>
        </div>
        <div class="layui-col-md3 layui-col-md-offset1">
            <blockquote class="layui-elem-quote">按年份查看</blockquote>
            <table class="layui-table" lay-filter="yearGroup" id="yearGroup" lay-skin="nob" lay-size="sm"></table>
            <br />
            <blockquote class="layui-elem-quote">按分期查看</blockquote>
            <table class="layui-table" lay-filter="issueGroup" id="issueGroup" lay-skin="nob" lay-size="sm"></table>
        </div>
    </div>
</div>

<!-- 控制脚本 -->
<script>
    layui.use(['element', 'layer', 'form', 'table'], function(){
        var element = layui.element
            ,form = layui.form
            ,table = layui.table
            ,layer = layui.layer
            ,$ = layui.$;

        var layer_index = layer.load(0,{time: 10*1000});

        var tableIns = table.render({
            elem: '#dataTable'
            ,where: {
                keyword: $('#keyword').val()
                ,year:  $('#year').val()
                ,issue: $('#issue').val()
                ,pid: {$pid}
            }
            ,url: '{:url(\'api/search/publicationList\')}'
            ,method: 'post'
            ,page: true
            ,skin: 'nob'
            ,loading: true
            ,limit:10
            ,cols: [[
                {type:'checkbox', width:60}
                ,{field:'docid', title:'DOCID', event: 'viewArticle', style:'cursor: pointer;', width:150}
                ,{field:'mtitle', title: '标题', sort: true}
                ,{field:'year', width:100, title: '年份', sort: true}
            ]]
            , done: function(res, curr, count){
                layer.close(layer_index);
                $('#times').html(res.times);
                //得到数据总量
                $('#counts').html(count);
                //渲染年份聚类列表
                if(curr===1 && $('#year').val()==''){
                    var tempStr = '';
                    var i=6;
                    for(var key in res.year){
                        tempStr += '<td><a href="javascript:;">' + key  + '</a></td>';
                        if(i%5===0){
                            tempStr +='</tr><tr>';
                        }
                        i++;
                    }
                    $('#yearGroup').html('<tbody><tr>'+tempStr+'</tr></tbody>');
                }
                //渲染分期聚类列表
                if(curr===1 && $('#issue').val()==''){
                    var tempStr = '';
                    var i=6;
                    for(var key in res.issue){
                        tempStr += '<td><a href="javascript:;">' + key  + '</a></td>';
                        if(i%5===0){
                            tempStr +='</tr><tr>';
                        }
                        i++;
                    }
                    $('#issueGroup').html('<tbody><tr>'+tempStr+'</tr></tbody>');
                }
            }
        });

        //监听表格点击
        table.on('tool(dataTable)', function(obj){
            var data = obj.data;
            if(obj.event === 'viewArticle'){
                window.open("{:url('index/article')}?type={$type}&docid="+data.docid);
            }
        });

        //监听提交
        form.on('submit(searchButton)', function(data){
            layer_index = layer.load();
            $('#year').val('');
            tableIns.reload({
                where: {
                    keyword: $('#keyword').val()
                    ,year:  $('#year').val()
                    ,issue: $('#issue').val()
                    ,pid: {$pid}
                }
                ,page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
            return false;
        });

        //监听年份聚类点击
        $(document).on('click', '#yearGroup a', function(data){
            layer_index = layer.load();
            $('#year').val(data.target.innerText);
            $('#issue').val('');
            tableIns.reload({
                where: {
                    keyword: $('#keyword').val()
                    ,year:  $('#year').val()
                    ,pid: {$pid}
                }
                ,page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
            return false;
        });

        //监听分期聚类点击
        $(document).on('click', '#issueGroup a', function(data){
            layer_index = layer.load();
            $('#issue').val(data.target.innerText);
            tableIns.reload({
                where: {
                    keyword: $('#keyword').val()
                    ,year:  $('#year').val()
                    ,issue: URLEncode($('#issue').val())
                    ,pid: {$pid}
                }
                ,page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
            return false;
        });

    });


    function URLEncode (clearString) {
        var output = '';
        var x = 0;
        clearString = clearString.toString();
        var regex = /(^[a-zA-Z0-9-_.]*)/;
        while (x < clearString.length) {
            var match = regex.exec(clearString.substr(x));
            if (match != null && match.length > 1 && match[1] != '') {
                output += match[1];
                x += match[1].length;
            } else {
                if (clearString.substr(x, 1) == ' ') {
                    output += '+';
                }
                else {
                    var charCode = clearString.charCodeAt(x);
                    var hexVal = charCode.toString(16);
                    output += '%' + ( hexVal.length < 2 ? '0' : '' ) + hexVal.toUpperCase();
                }
                x++;
            }
        }
        return output;
    }
</script>

<!-- 页脚 -->
{include file="public/footer" /}